<template>
  <div class="hello">
    <h1>数据展示</h1>
    <el-button @click="login()">登录</el-button>
    <el-card>
      <el-table
        :data="
          tableData.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          )
        "
        style="width: 100%"
        height="500"
      >
        <el-table-column prop="account" label="账户" width="180" fixed>
          <template slot-scope="scope">
            {{ scope.row.account }}
          </template>
        </el-table-column>
        <el-table-column
          prop="exchange"
          label="exchange"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.exchange }}
          </template>
        </el-table-column>
        <el-table-column
          prop="symbol"
          label="symbol"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.symbol }}
          </template>
        </el-table-column>
        <el-table-column
          prop="indicator_name"
          label="indicator_name"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.indicator_name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="period_type"
          label="period_type"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.period_type }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="status"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column
          prop="trigger_method"
          label="trigger_method"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.trigger_method }}
          </template>
        </el-table-column>
        <el-table-column
          prop="gw_type"
          label="gw_type"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.gw_type }}
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="create_time"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.create_time }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// import { encode, decode } from '@/assets/js/base64.js'
import { createSocket } from '../assets/js/websocket.js'
export default {
  data() {
    return {
      //    分页
      currentPage: 1,
      pagesize: 5,
      total: 5
    }
  },
  computed: {
    tableData() {
      return this.$store.state.data
    }
  },
  methods: {
    login() {
      createSocket('ws://175.27.243.236:6060/test')
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    towNumber(val) {
      return Number(val).toFixed(2)
    }
  }
}
</script>

<style Lang="less" scoped></style>
